<!doctype html>
<!--[if lt IE 7 ]><html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]><html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="author" content="ThemeFuse">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Metro Vibes | Documentation</title>

<!-- main JS libs -->
<script src="../metro-vibes-css/js/libs/modernizr.min.js"></script>
<script src="../metro-vibes-css/js/libs/jquery-1.10.0.js"></script>
<script src="../metro-vibes-css/js/libs/jquery-ui.min.js"></script>
<script src="../metro-vibes-css/js/libs/bootstrap.min.js"></script>

<!-- Style CSS -->
<link href="../metro-vibes-css/css/bootstrap.css" media="screen" rel="stylesheet">
<link href="../metro-vibes-css/style.css" media="screen" rel="stylesheet">
<link href="css/docs.css" media="screen" rel="stylesheet">

<!-- scripts -->
<script src="../metro-vibes-css/js/general.js"></script>
<script src="js/general.js"></script>

<!-- datepicker -->
<link href="../metro-vibes-css/css/jquery-ui-1.8.20.custom.css" rel="stylesheet">

<!-- custom input -->
<script src="../metro-vibes-css/js/jquery.customInput.js"></script>
<script type="text/javascript" src="../metro-vibes-css/js/custom.js"></script>

<!-- Placeholders -->
<script type="text/javascript" src="../metro-vibes-css/js/jquery.powerful-placeholder.min.js"></script>

<!-- Scroll Bars -->
<script src="../metro-vibes-css/js/jquery.mousewheel.js"></script>
<script src="../metro-vibes-css/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar').jScrollPane({
            verticalDragMaxHeight: 9,
            verticalDragMinHeight:9
        });

        jQuery('.scrollbar.scrollbar-yellow').jScrollPane({
            verticalDragMaxHeight: 20,
            verticalDragMinHeight:20
        });

        jQuery('.scrollbar.scrollbar-red').jScrollPane({
            verticalDragMaxHeight: 5,
            verticalDragMinHeight:5
        });

        jQuery('.scrollbar.scrollbar-blue').jScrollPane({
            verticalDragMaxHeight: 50,
            verticalDragMinHeight:50
        });
    });
</script>

<!-- Progress Bars -->
<script src="../metro-vibes-css/js/progressbar.js"></script>

<!-- range sliders -->
<script src="../metro-vibes-css/js/jquery.slider.bundle.js"></script>
<script src="../metro-vibes-css/js/jquery.slider.js"></script>
<link rel="stylesheet" href="../metro-vibes-css/css/jslider.css">

<!-- Video Player -->
<link href="../metro-vibes-css/css/video-js.css" rel="stylesheet">
<script src="../metro-vibes-css/js/video.js"></script>

<!-- Audio Player -->
<link href="../metro-vibes-css/css/jplayer.css" rel="stylesheet">
<script src="../metro-vibes-css/js/jquery.jplayer.min.js"></script>
<script src="../metro-vibes-css/js/jplayer.playlist.min.js"></script>
<script type="text/javascript">
    //<![CDATA[
    $(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"<div class='item-song'>He lives in you, he lives in me</div><div class='item-artist'>Elton John, Hans Zimmer</div><img src='../metro-vibes-css/images/temp/music-player4.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
            },
            {
                title:"<div class='item-song'>I saw you dancing</div><div class='item-artist'>Yaki Da</div><img src='../metro-vibes-css/images/temp/music-player5.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
            },
            {
                title:"<div class='item-song'>Sands of Time</div><div class='item-artist'>Pandora</div><img src='../metro-vibes-css/images/temp/music-player6.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]>
</script>

<!-- Calendar -->
<script src="../metro-vibes-css/js/jquery-ui.multidatespicker.js"></script>

<!-- Graph Builder -->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Media', 'GB'],
            ['Audio', 1100],
            ['Video', 460],
            ['Photo', 340],
            ['Other', 100]
        ]);

        var options = {
            pieHole: 0.4,
            legend: 'none',
            pieSliceText: 'none',
            width: 220,
            height: 220,
            slices: {0: {color: '#4daf7b'}, 1: {color: '#e6623d'}, 2: {color: '#ebc85e'}, 3: {color: '#f4ede7'}},
            chartArea:{left:"10px", top:"10px", width:"92%", height:"92%"}
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);

        var data2 = google.visualization.arrayToDataTable([
            ['Month', 'Traffic'],
            ['June',  1100],
            ['July',  1580],
            ['August',  1300],
            ['September',  1430]
        ]);

        var options2 = {
            width: 220,
            height: 220,
            legend: 'none',
            colors: ['#4daf7b'],
            chartArea:{left:0, top:0, width:"100%", height:"100%"},
            hAxis:{textPosition:"none", gridlines:{color:"#fff"}, baselineColor:"#4daf7b"},
            vAxis:{textPosition:"none", gridlines:{color:"#fff"}, baselineColor:"#4daf7b"}
        };

        var chart2 = new google.visualization.ColumnChart(document.getElementById('columnchart'));
        chart2.draw(data2, options2);
    }
</script>

<!-- SyntaxHighlighter -->
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<link href="css/prettify.css" rel="stylesheet">

<!--[if lt IE 9]><script src="../metro-vibes-css/js/respond.min.js"></script><![endif]-->
<!--[if gte IE 9]>
<style type="text/css">
    .gradient {filter: none !important;}
</style>
<![endif]-->
</head>

<body>
<div class="body_wrap">

    <header class="header-demo">
        <div class="inner gradient">
            <!-- container -->
            <div class="container">
                <!-- row -->
                <div class="row">
                    <div class="col-sm-3">
                        <div class="logo"><img src="images/logo.png" alt="" /></div>
                    </div>

                    <div class="col-sm-9">
                        <h1>Metro Vibes UI Kit</h1>
                        <span>Version: 1.0</span>
                        <span>Last update: 29.10.2013</span>
                    </div>
                </div>
                <!--/ row-->
            </div>
            <!--/ container -->
        </div>
    </header>

    <!-- container -->
    <div class="container">
        <!-- row -->
        <div class="row">
            <div class="col-sm-3">
                <div class="sidebar-demo hidden-print" role="complementary" data-spy="affix" data-offset-top="200">
                    <ul class="nav">
						<li><a href="#about">What is Metro Vibes</a></li>
						<li><a href="#what-included">What is included</a></li>
						<li><a href="#browser">Browser support</a></li>
						<li><a href="#getting-started">Getting Started</a></li>
						<li><a href="#template">Basic Template</a></li>
						<li><a href="#typography">Typography</a></li>
                        <li>
                            <a href="#buttons">Components</a>
                            <ul class="nav">
                                <li>
                                    <a href="#buttons">Buttons</a>
                                    <ul class="nav">
                                        <li><a href="#buttons-colors">Different Colors</a></li>
                                        <li><a href="#buttons-sizes">Different Sizes</a></li>
                                        <li><a href="#buttons-arrows">Buttons with Arrows</a></li>
                                        <li><a href="#buttons-input">Buttoned Input</a></li>
                                    </ul>
                                </li>
                                <li><a href="#ribbons">Ribbons</a></li>
                                <li><a href="#badges">Badges</a></li>
                                <li><a href="#rating-stars">Rating Stars</a></li>
                                <li>
                                    <a href="#form">Form Elements</a>
                                    <ul class="nav">
                                        <li><a href="#form-checkboxes">Checkboxes</a></li>
                                        <li><a href="#form-radios">Radio Buttons</a></li>
                                        <li><a href="#form-inputs">Text Inputs</a></li>
                                        <li><a href="#form-textarea">Textareas</a></li>
                                    </ul>
                                </li>
                                <li><a href="#scroll-bars">Scroll Bars</a></li>
                                <li><a href="#progress-bars">Progress bars</a></li>
                                <li><a href="#range-slider">Range Slider</a></li>
                                <li>
                                    <a href="#navigation">Navigation</a>
                                    <ul class="nav">
                                        <li><a href="#website-menu">Website Menu</a></li>
                                        <li><a href="#user-menu">User Menu</a></li>
                                    </ul>
                                </li>
                                <li><a href="#tabs">Tabs</a></li>
                            </ul>
                        </li>

                        <li>
                            <a href="#pricing">Widgets</a>
                            <ul class="nav">
                                <li>
                                    <a href="#pricing">Pricing</a>
                                    <ul class="nav">
                                        <li><a href="#pricing-def">Default style</a></li>
                                        <li><a href="#pricing-alt">Alternative style</a></li>
                                    </ul>
                                </li>
                                <li><a href="#content-box">Content Box</a></li>
                                <li><a href="#message-field">Message Field</a></li>
                                <li><a href="#video-player">Video Player</a></li>
                                <li><a href="#audio-player">Audio Player</a></li>
                                <li>
                                    <a href="#sliders">Sliders</a>
                                    <ul class="nav">
                                        <li><a href="#image-slider">Image Slider</a></li>
                                    </ul>
                                </li>
                                <li><a href="#widget-calendar">Calendar</a></li>
                                <li>
                                    <a href="#user-profile">User Profile</a>
                                    <ul class="nav">
                                        <li><a href="#user-def">Default style</a></li>
                                    </ul>
                                </li>
                                <li><a href="#social-buttons">Social Buttons</a></li>
                                <li><a href="#weather-informer">Weather Informer</a></li>
                                <li><a href="#trade-informer">Trade Informer</a></li>
                                <li><a href="#statistics">Statistics</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-sm-9">
                <!-- content -->
                <div class="content-demo" role="main">

                    <!-- What is this -->
                    <div class="section-demo">
                        <h2 id="about">What is Metro Vibes UI Kit</h2>

                        <div class="description">
                            <p><a href="http://pixelkit.com/previews/metro-ui-kit/" target="_blank">Metro Vibes UI Kit</a> is a number of useful user interface components built on <a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a> framework. We did not modify any line of Bootstrap, so you can safely use Metro Vibes UI Kit in your ongoing project.</p>
                        </div>

                    </div>
                    <!--/ What is this -->

                    <!-- What's included -->
                    <div class="section-demo">
                        <h2 id="what-included">What is included</h2>

                        <div class="description">
                            <p>Once purchased, unzip the compressed folder to see the directory structure of Metro Vibes UI Kit. You'll see something like this:</p>
                        </div>
                        <div class="example">
                            <div class="example-code">
                                    <pre class="prettyprint">
metro-vibes
├───docs
│   ├───css
│   ├───images
│   └───js
├───metro-vibes-css
│   ├───css
│   ├───fonts
│   ├───images
│   │   ├───icons
│   │   ├───prettyPhoto
│   │   └───temp
│   └───js
│       └───libs
└───metro-vibes-less
├───fonts
├───images
│   ├───icons
│   ├───prettyPhoto
│   └───temp
├───js
│   └───libs
└───less
    └───bootstrap
                                    </pre>
                            </div>
                        </div>
                        <div class="description">
                            <dl class="clearfix">
                                <dt class="parent">docs/</dt><dd>contains this documentation.</dd>
                                <dt class="parent">metro-vibes-css/</dt><dd>contains Metro Vibes UI Kit in simple CSS format. Use it to easily start your project.</dd>
                                <dt>css/</dt><dd>contains all the stylesheets for CSS version of the kit.</dd>
                                <dt>fonts/</dt><dd>contains Bootstrap Glyphicons for CSS version of the kit.</dd>
                                <dt>images/</dt><dd>contains all the images for CSS version of the kit.</dd>
                                <dt>images/icons/</dt><dd>contains all the icons for CSS version of the kit.</dd>
                                <dt>images/temp/</dt><dd>contains all the temporary images for CSS version of the kit.</dd>
                                <dt>js/</dt><dd>contains all the JS files for CSS version of the kit.</dd>

                                <dt class="parent">metro-vibes-less/</dt><dd>contains Metro Vibes UI Kit in LESS format. Use it to modify this kit in your project.</dd>
                                <dt>fonts/</dt><dd>contains Bootstrap Glyphicons for LESS version of the kit.</dd>
                                <dt>images/</dt><dd>contains all the images for LESS version of the kit.</dd>
                                <dt>images/icons/</dt><dd>contains all the icons for LESS version of the kit.</dd>
                                <dt>images/temp/</dt><dd>contains all the temporary images for LESS version of the kit.</dd>
                                <dt>js/</dt><dd>contains all the JS files for LESS version of the kit.</dd>
                                <dt>less/</dt><dd>contains all the stylesheets for LESS version of the kit.</dd>
                            </dl>

                            <p><em>Note:</em> The folders <code>metro-vibes-css</code> and <code>metro-vibes-less</code> is fully independent from each other, including all the images and JS files. You can use the version you prefer without pulling images or JS files from the other version of the kit.</p>
                        </div>
                    </div>
                    <!--/ What's included -->

                    <!-- Browser support -->
                    <div class="section-demo">
                        <h2 id="browser">Browser support</h2>

                        <div class="description">
                            <p>Since <a href="http://pixelkit.com/previews/metro-ui-kit/" target="_blank">Metro Vibes UI Kit</a> is built on <a href="http://getbootstrap.com" target="_blank">Bootstrap 3</a> framework, it supports the same <a href="http://getbootstrap.com/getting-started/#browsers" target="_blank">browsers</a> as Bootstrap.</p>
                        </div>

                    </div>
                    <!--/ Browser support -->

                    <!-- Getting Started -->
                    <div class="section-demo">
                        <h2 id="getting-started">Getting Started</h2>

                        <div class="description">
                            <p>To start working with <a href="http://pixelkit.com/previews/metro-ui-kit/" target="_blank">Metro Vibes UI Kit</a> you can use a basic <code>template.html</code>, or take the completely functional pages included in this package. Since it is built on Bootstrap, you can also use it on your project with Bootstrap 3.
                                <br />
                                We provide you both CSS and LESS standalone versions which are completely identical in design and functions.
                            </p>
                            <p>
                                <em>CSS Version:</em> You can use CSS version by dropping contents of <code>metro-vibes-css</code> folder to your project folder and including <code>style.css</code> file in your HTML page: <code>&lt;link href="style.css" media="screen" rel="stylesheet"></code>
                            </p>
                            <p>
                                <em>LESS Version:</em> You can find it in <code>metro-vibes-less</code> folder. Use LESS if you want to modify Metro Vibes UI Kit. We built it Bootstrap way so you won't find big difference. Use <code>less/variables.less</code> to modify different styles, use <code>style.less</code> to remove needless components.
                            </p>
                            <p>
                                If you want to start from scratch, the best way is to use <a href="#template">our template</a> where all startup files are already included and ready to be used. You can find <code>template.html</code> file both for CSS and LESS version in their respective folders.
                            </p>
                        </div>

                    </div>
                    <!-- Getting Started -->

                    <!-- Basic Template -->
                    <div class="section-demo">
                        <h2 id="template">Basic Template</h2>

                        <div class="description">
                            <p>You can use a basic <a href="../metro-vibes-css/template.html" target="_blank">HTML template</a> to write your code, or take completely functional pages included in this package. Basic template as well as completely functional pages are available both for CSS and LESS versions of the Metro Vibes UI Kit.</p>
                        </div>
                        <div class="example">
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;!doctype html>
&lt;!--[if lt IE 7 ]>&lt;html lang="en" class="no-js ie6"> &lt;![endif]-->
&lt;!--[if IE 7 ]>&lt;html lang="en" class="no-js ie7"> &lt;![endif]-->
&lt;!--[if IE 8 ]>&lt;html lang="en" class="no-js ie8"> &lt;![endif]-->
&lt;!--[if IE 9 ]>&lt;html lang="en" class="no-js ie9"> &lt;![endif]-->
&lt;!--[if (gt IE 9)|!(IE)]>&lt;!-->&lt;html lang="en" class="no-js">&lt;!--&lt;![endif]-->
&lt;head>
    &lt;meta charset="utf-8">
    &lt;meta name="author" content="">
    &lt;meta name="keywords" content="">
    &lt;meta name="viewport" content="width=device-width,initial-scale=1">
    &lt;title>&lt;/title>

    &lt;!-- main JS libs -->
    &lt;script src="js/libs/modernizr.min.js">&lt;/script>
    &lt;script src="js/libs/jquery-1.10.0.js">&lt;/script>
    &lt;script src="js/libs/jquery-ui.min.js">&lt;/script>
    &lt;script src="js/libs/bootstrap.min.js">&lt;/script>

    &lt;!-- Style CSS -->
    &lt;link href="css/bootstrap.css" media="screen" rel="stylesheet">
    &lt;link href="style.css" media="screen" rel="stylesheet">

    &lt;!-- scripts -->
    &lt;script src="js/general.js">&lt;/script>

    &lt;!-- Include all needed stylesheets and scripts here -->

    &lt;!--[if lt IE 9]>&lt;script src="js/respond.min.js">&lt;/script>&lt;![endif]-->
    &lt;!--[if gte IE 9]>
    &lt;style type="text/css">
        .gradient {filter: none !important;}
    &lt;/style>
    &lt;![endif]-->
&lt;/head>

&lt;body>
    &lt;!-- container -->
    &lt;div class="container">

        Start your work here.

    &lt;/div>
    &lt;!--/ container -->
&lt;/body>
&lt;/html>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!-- Basic Template -->

                    <!-- Typography -->
                    <div class="section-demo">
                        <h2 id="typography">Typography</h2>

                        <div class="description">
                            <p>
                                Metro Vibes UI Kit uses free <a href="http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans" target="_blank">Open Sans</a> webfont available at the <a href="http://www.google.com/fonts" target="_blank">Google Fonts</a>. The global default font-size is 13px, with a font-weight of 400. This is applied to the <code>&lt;body></code> and all paragraphs. In addition, all <code>&lt;p></code> (paragraphs) receive a bottom margin of 16px.
                                <br />
                                Also, all headings, <code>&lt;h1></code> through <code>&lt;h6></code> are available.
                            </p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <h1>Example (h1)</h1>
                                <h2>Example (h2)</h2>
                                <h3>Example (h3)</h3>
                                <h4>Example (h4)</h4>
                                <h5>Example (h5)</h5>
                                <h6>Example (h6)</h6>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor.</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
                            </div>
                            <div class="example-code">
                                    <pre class="prettyprint">
&lt;h1>Example (h1)&lt;/h1>
&lt;h2>Example (h2)&lt;/h2>
&lt;h3>Example (h3)&lt;/h3>
&lt;h4>Example (h4)&lt;/h4>
&lt;h5>Example (h5)&lt;/h5>
&lt;h6>Example (h6)&lt;/h6>
&lt;p>Lorem ipsum dolor sit amet.&lt;/p>
&lt;p>Lorem ipsum dolor sit amet.&lt;/p>
                                    </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Typography -->

                    <!-- Buttons -->
                    <div class="section-demo">
                        <h2 id="buttons">Buttons</h2>

                        <!--/ Button Colors -->
                        <div class="description">
                            <h3 id="buttons-colors">Different Colors</h3>
                            <p>Use any of the available button classes to quickly create a colored button.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <a href="#" class="btn"><span>Default</span></a>
                                <a href="#" class="btn btn-blue"><span>Blue</span></a>
                                <a href="#" class="btn btn-green"><span>Green</span></a>
                                <a href="#" class="btn btn-lime"><span>Lime</span></a>
                                <a href="#" class="btn btn-yellow"><span>Yellow</span></a>
                                <a href="#" class="btn btn-pink"><span>Pink</span></a>
                                <a href="#" class="btn btn-brown"><span>Brown</span></a>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;a href="#" class="btn">&lt;span>Default&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-blue">&lt;span>Blue&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-green">&lt;span>Green&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-lime">&lt;span>Lime&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-yellow">&lt;span>Yellow&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-pink">&lt;span>Pink&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-brown">&lt;span>Brown&lt;/span>&lt;/a>
                                </pre>
                            </div>
                        </div>
                        <!--/ Button Colors -->

                        <!--/ Button Sizes -->
                        <div class="description">
                            <h3 id="buttons-sizes">Different Sizes</h3>
                            <p>Buttons available in small, default and large size.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <a href="#" class="btn btn-small"><span>Small Button</span></a>
                                <a href="#" class="btn"><span>Default Button</span></a>
                                <a href="#" class="btn btn-large"><span>Large Button</span></a>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;a href="#" class="btn btn-small">&lt;span>Small Button&lt;/span>&lt;/a>
&lt;a href="#" class="btn">&lt;span>Default Button&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-large">&lt;span>Large Button&lt;/span>&lt;/a>
                                </pre>
                            </div>
                        </div>
                        <!--/ Button Sizes -->

                        <!-- Buttons with Arrows -->
                        <div class="description">
                            <h3 id="buttons-arrows">Buttons with Arrows</h3>
                            <p>Arrowed buttons available only in green color and default size.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <a href="#" class="btn btn-left"><span>&nbsp;Left&nbsp;</span></a>
                                <a href="#" class="btn btn-right"><span>Right</span></a>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;a href="#" class="btn btn-left">&lt;span>Left&lt;/span>&lt;/a>
&lt;a href="#" class="btn btn-right">&lt;span>Right&lt;/span>&lt;/a>
                                </pre>
                            </div>
                        </div>
                        <!--/ Buttons with Arrows -->

                        <!-- Buttoned Input -->
                        <div class="description">
                            <h3 id="buttons-input">Buttoned Input</h3>
                            <p>Wrap <code>input type="submit"</code> into <code>span</code> and use available button classes to create a styled Input.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-buttons">
                                <span class="btn btn-blue"><input type="submit" value="Submit" /></span>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;span class="btn btn-blue">&lt;input type="submit" value="Submit" />&lt;/span>
                                </pre>
                            </div>
                        </div>
                        <!--/ Buttoned Input -->
                    </div>
                    <!--/ Buttons -->

                    <!-- Ribbons -->
                    <div class="section-demo">
                        <h2 id="ribbons">Ribbons</h2>

                        <div class="description">
                            <p>Easily highlight items with Ribbons.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-ribbons alt-color">
                                <div class="ribbon"><span><em>Sale</em><strong>20%</strong></span></div>
                                <div class="ribbon ribbon-blue"><span><em>Sale</em><strong>50%</strong></span></div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="ribbon">
    &lt;span>
        &lt;em>Sale&lt;/em>
        &lt;strong>20%&lt;/strong>
    &lt;/span>
&lt;/div>

&lt;div class="ribbon ribbon-blue">
    &lt;span>
        &lt;em>Sale&lt;/em>
        &lt;strong>50%&lt;/strong>
    &lt;/span>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Ribbons -->

                    <!-- Badges -->
                    <div class="section-demo">
                        <h2 id="badges">Badges</h2>

                        <div class="description">
                            <p>Easily highlight items with Badges.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item example-ribbons alt-color">
                                <span class="badge"></span>
                                <span class="badge badge-large"></span>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;span class="badge">&lt;/span>
&lt;span class="badge badge-large">&lt;/span>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Badges -->

                    <!-- Rating Stars -->
                    <div class="section-demo">
                        <h2 id="rating-stars">Rating Stars</h2>

                        <div class="description">
                            <p>Use rating stars for voting.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item">
                                <!-- Rating Stars -->
                                <div class="rating">
                                    <span class="star on"><input type="hidden" value="1"></span><!--
                                    --><span class="star on"><input type="hidden" value="2"></span><!--
                                    --><span class="star on"><input type="hidden" value="3"></span><!--
                                    --><span class="star off"><input type="hidden" value="4"></span><!--
                                    --><span class="star off"><input type="hidden" value="5"></span>
                                </div>
                                <!--/ Rating Stars -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="rating">
    &lt;span class="star on">&lt;input type="hidden" value="1">&lt;/span>&lt;!--
    -->&lt;span class="star on">&lt;input type="hidden" value="2">&lt;/span>&lt;!--
    -->&lt;span class="star on">&lt;input type="hidden" value="3">&lt;/span>&lt;!--
    -->&lt;span class="star off">&lt;input type="hidden" value="4">&lt;/span>&lt;!--
    -->&lt;span class="star off">&lt;input type="hidden" value="5">&lt;/span>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Rating Stars -->

                    <!-- Form Elements -->
                    <div class="section-demo">
                        <h2 id="form">Form Elements</h2>

                        <!-- CheckBoxes -->
                        <div class="description">
                            <h3 id="form-checkboxes">Checkboxes</h3>
                            <p>Use styled checkboxes instead of the usual ones.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Attribute <code>name</code> required for <code>input</code> element.</p>
                                <p>Styled Checkbox require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.customInput.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color-2">
                                <div class="input_styled checklist">
                                    <div class="rowCheckbox"><input name="signup" type="checkbox" checked id="signup" value="signup"><label for="signup">Default Checkbox</label></div>
                                    <div class="rowCheckbox checkbox-red"><input name="signup2" type="checkbox" checked id="signup2" value="signup2"><label for="signup2">Red Checkbox</label></div>
                                    <div class="rowCheckbox checkbox-filled"><input name="signup3" type="checkbox" checked id="signup3" value="signup3"><label for="signup3">White background</label></div>
                                    <br />
                                    <div class="rowCheckbox checkbox-large"><input name="signup4" type="checkbox" checked id="signup4" value="signup4"><label for="signup4">Switch</label></div>
                                    <div class="rowCheckbox checkbox-large checkbox-white"><input name="signup5" type="checkbox" checked id="signup5" value="signup5"><label for="signup5">White background switch</label></div>
                                    <div class="rowCheckbox checkbox-large checkbox-noText"><input name="signup6" type="checkbox" checked id="signup6" value="signup6"><label for="signup6">Switch without text</label></div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="input_styled checklist">
    &lt;div class="rowCheckbox">
        &lt;input name="signup" type="checkbox" id="signup" value="signup">
        &lt;label for="signup">Default Checkbox&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox checkbox-red">
        &lt;input name="signup2" type="checkbox" id="signup2" value="signup2">
        &lt;label for="signup2">Red Checkbox&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox checkbox-filled">
        &lt;input name="signup3" type="checkbox" id="signup3" value="signup3">
        &lt;label for="signup3">White background&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox checkbox-large">
        &lt;input name="signup4" type="checkbox" id="signup4" value="signup4">
        &lt;label for="signup4">Switch&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox checkbox-large checkbox-white">
        &lt;input name="signup5" type="checkbox" id="signup5" value="signup5">
        &lt;label for="signup5">White background switch&lt;/label>
    &lt;/div>
    &lt;div class="rowCheckbox checkbox-large checkbox-noText">
        &lt;input name="signup6" type="checkbox" id="signup6" value="signup6">
        &lt;label for="signup6">Switch without text&lt;/label>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!--/ CheckBoxes -->

                        <!-- Radios -->
                        <div class="description">
                            <h3 id="form-radios">Radio Buttons</h3>
                            <p>Use styled radio buttons instead of the usual ones.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Attribute <code>name</code> required for <code>input</code> element.</p>
                                <p>Styled Radio Button require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.customInput.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color-2">
                                <div class="input_styled inlinelist">
                                    <div class="rowRadio"><input type="radio" name="survey" value="radio_v1" id="radio_v1" checked><label for="radio_v1">Default Button</label></div>
                                    <div class="rowRadio radio-red"><input type="radio" name="survey" value="radio_v2" id="radio_v2"><label for="radio_v2">Red Button</label></div>
                                    <div class="rowRadio radio-filled"><input type="radio" name="survey" value="radio_v3" id="radio_v3"><label for="radio_v3">White background</label></div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="input_styled inlinelist">
    &lt;div class="rowRadio">
        &lt;input type="radio" name="survey" value="radio_v1" id="radio_v1" checked>
        &lt;label for="radio_v1">Default Button&lt;/label>
    &lt;/div>
    &lt;div class="rowRadio radio-red">
        &lt;input type="radio" name="survey" value="radio_v2" id="radio_v2">
        &lt;label for="radio_v2">Red Button&lt;/label>
    &lt;/div>
    &lt;div class="rowRadio radio-filled">
        &lt;input type="radio" name="survey" value="radio_v3" id="radio_v3">
        &lt;label for="radio_v3">White background&lt;/label>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!--/ Radios -->

                        <!-- Text Inputs -->
                        <div class="description">
                            <h3 id="form-inputs">Text Inputs</h3>
                            <p>All Text inputs are styled.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Text Inputs with <code>placeholders</code> require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.powerful-placeholder.min.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item clearfix">
                                <div class="field_text">
                                    <input type="text" name="name" id="name" placeholder="Name">
                                </div>
                                <div class="field_text omega">
                                    <input type="text" name="email" id="email" placeholder="Email">
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="field_text">
    &lt;input type="text" name="name" id="name" placeholder="Name">
&lt;/div>

&lt;div class="field_text omega">
    &lt;input type="text" name="email" id="email" placeholder="Email">
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!--/ Text Inputs -->

                        <!-- TextAreas -->
                        <div class="description">
                            <h3 id="form-textarea">Textareas</h3>
                            <p>All Textareas are styled similar to Text inputs.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Textareas with <code>placeholders</code> require next file to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.powerful-placeholder.min.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item clearfix">
                                <div class="field_text field_textarea">
                                    <textarea id="message" placeholder="Message"></textarea>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="field_text field_textarea">
    &lt;textarea id="message" placeholder="Message">&lt;/textarea>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!--/ TextAreas -->
                    </div>
                    <!--/ Form Elements -->

                    <!-- Scroll Bars -->
                    <div class="section-demo">
                        <h2 id="scroll-bars">Scroll Bars</h2>

                        <div class="description">
                            <p>Use any of the available classes to quickly create a styled Scroll Bar for your site.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Styled Scroll Bar require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery.mousewheel.js">&lt;/script>
&lt;script src="js/jquery.jscrollpane.min.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item clearfix">
                                <div class="scrollBars clearfix">
                                    <!-- ScrollBars -->
                                    <div class="scrollbar">
                                        <div class="scrollbar-inner">
                                            <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                        </div>
                                    </div>
                                    <div class="scrollbar scrollbar-yellow">
                                        <div class="scrollbar-inner">
                                            <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                        </div>
                                    </div>
                                    <div class="scrollbar scrollbar-red">
                                        <div class="scrollbar-inner">
                                            <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                        </div>
                                    </div>
                                    <div class="scrollbar scrollbar-blue">
                                        <div class="scrollbar-inner">
                                            <p>These examples show very basic functionality and exist so that I can test that any changes to jScrollPane work cross browser and don't cause any new problems. Note that these examples aren't meant to look pretty, they merely highlight different bits of functionaity which are available. If you want examples of jScrollPane looking good then check out the themes.</p>
                                        </div>
                                    </div>
                                    <!--/ ScrollBars -->
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="scrollbar">
    &lt;div class="scrollbar-inner">
        &lt;!--place your content here-->
    &lt;/div>
&lt;/div>

&lt;div class="scrollbar scrollbar-yellow">
    &lt;div class="scrollbar-inner">
        &lt;!--place your content here-->
    &lt;/div>
&lt;/div>

&lt;div class="scrollbar scrollbar-red">
    &lt;div class="scrollbar-inner">
        &lt;!--place your content here-->
    &lt;/div>
&lt;/div>

&lt;div class="scrollbar scrollbar-blue">
    &lt;div class="scrollbar-inner">
        &lt;!--place your content here-->
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Scroll Bars via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    jQuery(function()
    {
        jQuery('.scrollbar').jScrollPane({
            verticalDragMaxHeight: 9,
            verticalDragMinHeight:9
        });

        jQuery('.scrollbar.scrollbar-yellow').jScrollPane({
            verticalDragMaxHeight: 20,
            verticalDragMinHeight:20
        });

        jQuery('.scrollbar.scrollbar-red').jScrollPane({
            verticalDragMaxHeight: 5,
            verticalDragMinHeight:5
        });

        jQuery('.scrollbar.scrollbar-blue').jScrollPane({
            verticalDragMaxHeight: 50,
            verticalDragMinHeight:50
        });
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Scroll Bars -->

                    <!-- Progress Bars -->
                    <div class="section-demo">
                        <h2 id="progress-bars">Progress Bars</h2>

                        <div class="description">
                            <p>Use styled Progress Bars on your site.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Styled Progress Bar require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery-ui.min.js">&lt;/script>
&lt;script src="js/progressbar.js">&lt;/script>
                                </pre>
                            </div>

                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item clearfix">
                                <!-- Progress Bar -->
                                <div id="progressBar1" class="progressbar">
                                    <span class="mark-left">0%</span>
                                    <span class="mark-right">100%</span>
                                    <div class="percent"></div>
                                    <div class="pbar"></div>
                                    <div class="elapsed"></div>
                                    <div class="remained"></div>
                                </div>
                                <script type="text/javascript">
                                    $(document).ready(function() {
                                        $('#progressBar1').anim_progressbar({
                                            totaltime: 800
                                        });
                                    });
                                </script>
                                <!--/ Progress Bar -->

                                <!-- Progress Bar with download Bar -->
                                <div id="progressBar2" class="progressbar style2">
                                    <span class="mark-left">0%</span>
                                    <span class="mark-right">100%</span>
                                    <div class="percent"></div>
                                    <div class="pbar">
                                        <div id="downloadBar2" class="downloadbar">
                                            <div class="pbar"></div>
                                        </div>
                                    </div>
                                    <div class="elapsed"></div>
                                    <div class="remained"></div>
                                </div>
                                <script type="text/javascript">
                                    $(document).ready(function() {
                                        $('#progressBar2').anim_progressbar({
                                            totaltime: 900
                                        });
                                        $('#downloadBar2').anim_progressbar({
                                            totaltime: 600
                                        });
                                    });
                                </script>
                                <!--/ Progress Bar with download Bar -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div id="progressBar1" class="progressbar">
    &lt;span class="mark-left">0%&lt;/span>
    &lt;span class="mark-right">100%&lt;/span>
    &lt;div class="percent">&lt;/div>
    &lt;div class="pbar">&lt;/div>
    &lt;div class="elapsed">&lt;/div>
    &lt;div class="remained">&lt;/div>
&lt;/div>

&lt;div id="progressBar2" class="progressbar style2">
    &lt;span class="mark-left">0%&lt;/span>
    &lt;span class="mark-right">100%&lt;/span>
    &lt;div class="percent">&lt;/div>
    &lt;div class="pbar">
        &lt;div id="downloadBar2" class="downloadbar">
            &lt;div class="pbar">&lt;/div>
        &lt;/div>
    &lt;/div>
    &lt;div class="elapsed">&lt;/div>
    &lt;div class="remained">&lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Progress Bars via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    $(document).ready(function() {
        $('#progressBar1').anim_progressbar({
            totaltime: 800
        });

        $('#progressBar2').anim_progressbar({
            totaltime: 900
        });
        $('#downloadBar2').anim_progressbar({
            totaltime: 600
        });
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Progress Bars -->

                    <!-- Price Range -->
                    <div class="section-demo">
                        <h2 id="range-slider">Range Slider</h2>

                        <div class="description">
                            <p>Range Slider allow users to select a value from a numerical range by simply dragging a slider.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Range Slider require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/jquery-ui.min.js">&lt;/script>
&lt;script src="js/jquery.slider.bundle.js">&lt;/script>
&lt;script src="js/jquery.slider.js">&lt;/script>
&lt;link rel="stylesheet" href="css/jslider.css">
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item clearfix">
                                <!-- Range slider -->
                                <div class="range-slider">
                                    <input id="price_range" type="text" value="120;720">
                                </div>
                                <script type="text/javascript" >
                                    jQuery(document).ready(function($) {
                                        // Price Range Input
                                        $("#price_range").rangeslider({
                                            from: 0,
                                            to: 1000,
                                            limits: false,
                                            scale: ['$0', '$1000'],
                                            heterogeneity: ['50/300'],
                                            step: 10,
                                            smooth: true,
                                            dimension: '$'
                                        });
                                    });
                                </script>
                                <!-- Range slider -->

                                <!-- Range slider -->
                                <div class="range-slider styled">
                                    <input id="price_range2" type="text" value="80;860">
                                </div>
                                <script type="text/javascript" >
                                    jQuery(document).ready(function($) {
                                        // Price Range Input
                                        $("#price_range2").rangeslider({
                                            from: 0,
                                            to: 1000,
                                            limits: false,
                                            scale: ['$0', '$1000'],
                                            heterogeneity: ['50/300'],
                                            step: 10,
                                            smooth: true,
                                            dimension: '$'
                                        });
                                    });
                                </script>
                                <!-- Range slider -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="range-slider">
    &lt;input id="price_range" type="text" value="120;720">
&lt;/div>

&lt;div class="range-slider styled">
    &lt;input id="price_range2" type="text" value="80;860">
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Price Range via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    jQuery(document).ready(function($) {
        $("#price_range").rangeslider({
            from: 0,
            to: 1000,
            limits: false,
            scale: ['$0', '$1000'],
            heterogeneity: ['50/300'],
            step: 10,
            smooth: true,
            dimension: '$'
        });

        $("#price_range2").rangeslider({
            from: 0,
            to: 1000,
            limits: false,
            scale: ['$0', '$1000'],
            heterogeneity: ['50/300'],
            step: 10,
            smooth: true,
            dimension: '$'
        });
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Price Range -->

                    <!-- Navigation -->
                    <div class="section-demo">
                        <h2 id="navigation">Navigation</h2>

                        <!-- Website Menu -->
                        <div class="description">
                            <h3 id="website-menu">Website Menu</h3>
                            <p>Use it as a main menu for your site.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <!-- Website Menu -->
                                <div id="topmenu">
                                    <ul class="dropdown clearfix boxed">
                                        <li><a href="#"><i class="icon-menu"></i><span>check in</span><sup class="note">3</sup></a></li>
                                        <li><a href="#"><i class="icon-menu icon-menu2"></i><span>events</span></a> </li>
                                        <li><a href="#"><i class="icon-menu icon-menu3"></i><span>account</span></a>
                                            <ul>
                                                <li><a href="#">Web design</a></li>
                                                <li><a href="#">User interface</a></li>
                                                <li><a href="#">Social media</a>
                                                    <ul>
                                                        <li><a href="#">Gallery images</a></li>
                                                        <li><a href="#">Fine Slider</a></li>
                                                        <li><a href="#">Video in header</a></li>
                                                        <li><a href="#">Video Slider</a></li>
                                                    </ul>
                                                </li>
                                            </ul>
                                        </li>
                                        <li><a href="#"><i class="icon-menu icon-menu4"></i><span>settings</span></a></li>
                                    </ul>
                                </div>
                                <!--/ Website Menu -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div id="topmenu">
    &lt;ul class="dropdown clearfix boxed">
        &lt;li>
            &lt;a href="#">
                &lt;i class="icon-menu">&lt;/i>
                &lt;span>check in&lt;/span>
                &lt;sup class="note">3&lt;/sup>
            &lt;/a>
        &lt;/li>
        &lt;li>
            &lt;a href="#">
                &lt;i class="icon-menu icon-menu2">&lt;/i>
                &lt;span>events&lt;/span>
            &lt;/a>
        &lt;/li>
        &lt;li>
            &lt;a href="#">
                &lt;i class="icon-menu icon-menu3">&lt;/i>
                &lt;span>account&lt;/span>
            &lt;/a>
            &lt;ul>
                &lt;li>&lt;a href="#">Web design&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">User interface&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Social media&lt;/a>
                    &lt;ul>
                        &lt;li>&lt;a href="#">Gallery images&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Fine Slider&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Video in header&lt;/a>&lt;/li>
                        &lt;li>&lt;a href="#">Video Slider&lt;/a>&lt;/li>
                    &lt;/ul>
                &lt;/li>
            &lt;/ul>
        &lt;/li>
        &lt;li>
            &lt;a href="#">
                &lt;i class="icon-menu icon-menu4">&lt;/i>
                &lt;span>settings&lt;/span>
            &lt;/a>
        &lt;/li>
    &lt;/ul>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!-- Website Menu -->

                        <!-- User Menu -->
                        <div class="description">
                            <h3 id="user-menu">User Menu</h3>
                            <p>Use it as a menu for user profile.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-7">
                                        <!-- User Menu -->
                                        <div class="user-menu">
                                            <ul class="dropdown clearfix boxed">
                                                <li><a href="#"><i class="icon-menu icon-menu5"></i><span>My Profile</span></a>
                                                    <ul>
                                                        <li><a href="#">Invite friends</a></li>
                                                        <li><a href="#">find friends</a></li>
                                                        <li><a href="#">Log out</a></li>
                                                    </ul>
                                                </li>
                                                <li><a href="#"><i class="icon-menu icon-menu6"></i><span>Edit Profile</span></a></li>
                                            </ul>
                                        </div>
                                        <!--/ User Menu -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="user-menu">
    &lt;ul class="dropdown clearfix boxed">
        &lt;li>
            &lt;a href="#">
                &lt;i class="icon-menu icon-menu5">&lt;/i>
                &lt;span>My Profile&lt;/span>
            &lt;/a>
            &lt;ul>
                &lt;li>&lt;a href="#">Invite friends&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">find friends&lt;/a>&lt;/li>
                &lt;li>&lt;a href="#">Log out&lt;/a>&lt;/li>
            &lt;/ul>
        &lt;/li>
        &lt;li>
            &lt;a href="#">
                &lt;i class="icon-menu icon-menu6">&lt;/i>
                &lt;span>Edit Profile&lt;/span>
            &lt;/a>
        &lt;/li>
    &lt;/ul>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                        <!-- User Menu -->
                    </div>
                    <!--/ Navigation -->

                    <!-- Tabs -->
                    <div class="section-demo">
                        <h2 id="tabs">Tabs</h2>

                        <div class="description">
                            <p>Add quick, dynamic tab functionality to transition through panes of local content.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <!-- tabs -->
                                        <div class="tabs_framed">
                                            <div class="inner">
                                                <ul class="tabs clearfix">
                                                    <li><a href="#recent" data-toggle="tab">Recent</a></li>
                                                    <li class="active"><a href="#popular" data-toggle="tab">Popular</a></li>
                                                </ul>

                                                <div class="tab-content boxed clearfix">
                                                    <div class="tab-pane fade" id="recent">
                                                        <h4>Vivamus Luctus Urna</h4>
                                                        <div class="tab_image"><img src="../metro-vibes-css/images/temp/tabimage1.png" alt="" /></div>
                                                        <p>Lorem ipsum dolor sit amet, consecte tur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcud erat molestie vehicula. Sed auctor</p>
                                                    </div>
                                                    <div class="tab-pane fade in active" id="popular">
                                                        <h4>Etiam At Risus Et Justo</h4>
                                                        <div class="tab_image pull-left"><img src="../metro-vibes-css/images/temp/tabimage2.png" alt="" /></div>
                                                        <p>Lorem ipsum dol or sit amet, cons ec tetur adipi scing elit. Nullam in dui mauris. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl.</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/ tabs -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="tabs_framed">
    &lt;div class="inner">
        &lt;ul class="tabs clearfix">
            &lt;li>&lt;a href="#recent" data-toggle="tab">Recent&lt;/a>&lt;/li>
            &lt;li class="active">&lt;a href="#popular" data-toggle="tab">Popular&lt;/a>&lt;/li>
        &lt;/ul>

        &lt;div class="tab-content boxed clearfix">
            &lt;div class="tab-pane fade" id="recent">
                &lt;!--place your content here-->
            &lt;/div>
            &lt;div class="tab-pane fade in active" id="popular">
                &lt;!--place your content here-->
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Tabs -->

                    <!-- Pricing List -->
                    <div class="section-demo">
                        <h2 id="pricing">Pricing</h2>

                        <!-- Pricing List Style 1 -->
                        <div class="description">
                            <p>
                                Use pricing items to announce prices for your services. Two different pricing styles available. Add class <code>col_active</code> to <code>price_col</code> to highlight pricing item. Add color class to <code>price_col</code> class to change item color.
                                <br />Available color classes are the next: <code>price_col_blue</code>, <code>price_col_yellow</code>, <code>price_col_red</code>, <code>price_col_green</code>.
                            </p>
                            <h3 id="pricing-def">Pricing Items default style</h3>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <!--pricing box-->
                                <div class="pricing_box">
                                    <ul class="clearfix">

                                        <li class="price_col price_col_blue col_active">
                                            <div class="price_item boxed">
                                                <div class="price_col_head">
                                                    <span class="badge"></span>
                                                    <span class="price"><em>$</em>199<sup>90</sup></span>
                                                </div>
                                                <div class="price_col_body clearfix">
                                                    <div class="price_body_inner">
                                                        <div class="price_body_top">
                                                            <span>Full Circle</span>
                                                            <strong>Basic</strong>
                                                            <div class="line"></div>
                                                        </div>
                                                        <ul>
                                                            <li>Unlimited Traffic</li>
                                                            <li>20 gb in Cloud</li>
                                                            <li>0.5 gbit/sec</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-blue btn-small"><span>Buy Now</span></a></div>
                                                </div>
                                            </div>
                                        </li>

                                        <li class="price_col price_col_yellow">
                                            <div class="price_item boxed">
                                                <div class="price_col_head">
                                                    <span class="badge"></span>
                                                    <span class="price">free</span>
                                                </div>
                                                <div class="price_col_body clearfix">
                                                    <div class="price_body_inner">
                                                        <div class="price_body_top">
                                                            <span>Full Circle</span>
                                                            <strong>Free</strong>
                                                            <div class="line"></div>
                                                        </div>
                                                        <ul>
                                                            <li>Unlimited Traffic</li>
                                                            <li>80 gb in Cloud</li>
                                                            <li>2 gbit/sec</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-yellow btn-small"><span>Buy Now</span></a></div>
                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                </div>
                                <!--/pricing box-->
                            </div>
                            <div class="example-code">
                                    <pre class="prettyprint">
&lt;div class="pricing_box">
    &lt;ul class="clearfix">

        &lt;li class="price_col price_col_blue col_active">
            &lt;!--pricing item-->
            &lt;div class="price_item boxed">
                &lt;div class="price_col_head">
                    &lt;span class="badge">&lt;/span>
                    &lt;span class="price">&lt;em>$&lt;/em>199&lt;sup>90&lt;/sup>&lt;/span>
                &lt;/div>
                &lt;div class="price_col_body clearfix">
                    &lt;div class="price_body_inner">
                        &lt;div class="price_body_top">
                            &lt;span>Full Circle&lt;/span>
                            &lt;strong>Basic&lt;/strong>
                            &lt;div class="line">&lt;/div>
                        &lt;/div>
                        &lt;ul>
                            &lt;li>Unlimited Traffic&lt;/li>
                            &lt;li>20 gb in Cloud&lt;/li>
                            &lt;li>0.5 gbit/sec&lt;/li>
                        &lt;/ul>
                    &lt;/div>
                &lt;/div>
                &lt;div class="price_col_foot">
                    &lt;div class="sign_up">
                        &lt;a href="#" class="btn btn-blue btn-small">&lt;span>Buy Now&lt;/span>&lt;/a>
                    &lt;/div>
                &lt;/div>
            &lt;/div>
            &lt;!--/ pricing-item -->
        &lt;/li>

        &lt;li class="price_col price_col_yellow">
            &lt;div class="price_item boxed">
                &lt;div class="price_col_head">
                    &lt;span class="badge">&lt;/span>
                    &lt;span class="price">free&lt;/span>
                &lt;/div>
                &lt;div class="price_col_body clearfix">
                    &lt;div class="price_body_inner">
                        &lt;div class="price_body_top">
                            &lt;span>Full Circle&lt;/span>
                            &lt;strong>Free&lt;/strong>
                            &lt;div class="line">&lt;/div>
                        &lt;/div>
                        &lt;ul>
                            &lt;li>Unlimited Traffic&lt;/li>
                            &lt;li>80 gb in Cloud&lt;/li>
                            &lt;li>2 gbit/sec&lt;/li>
                        &lt;/ul>
                    &lt;/div>
                &lt;/div>
                &lt;div class="price_col_foot">
                    &lt;div class="sign_up">
                        &lt;a href="#" class="btn btn-yellow btn-small">&lt;span>Buy Now&lt;/span>&lt;/a>
                    &lt;/div>
                &lt;/div>
            &lt;/div>
        &lt;/li>

    &lt;/ul>
&lt;/div>
                                    </pre>
                            </div>
                        </div>
                        <!-- Pricing List Style 1 -->

                        <!-- Pricing List Style 2 -->
                        <div class="description">
                            <h3 id="pricing-alt">Pricing Items alternative style</h3>
                            <p>To switch to alternative pricing style just add <code>price_style2</code> class to <code>pricing_box</code>.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <!-- pricing box style2-->
                                <div class="pricing_box price_style2">
                                    <ul class="clearfix">

                                        <li class="price_col price_col_blue col_active">
                                            <!--pricing item-->
                                            <div class="price_item boxed">
                                                <div class="price_col_head">
                                                    <span class="badge badge-large"></span>
                                                    <span class="price"><em>$</em>199<sup>90</sup></span>
                                                </div>
                                                <div class="price_col_body clearfix">
                                                    <div class="price_body_inner">
                                                        <div class="price_body_top">
                                                            <span>Full Circle</span>
                                                            <strong>Basic</strong>
                                                            <div class="line"></div>
                                                        </div>
                                                        <ul>
                                                            <li>Unlimited Traffic</li>
                                                            <li>20 gb in Cloud</li>
                                                            <li>0.5 gbit/sec</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-blue"><span>Buy Now</span></a></div>
                                                </div>
                                            </div>
                                            <!--/ pricing-item -->
                                        </li>

                                        <li class="price_col price_col_red">
                                            <!--pricing item-->
                                            <div class="price_item boxed">
                                                <div class="price_col_head">
                                                    <span class="badge badge-large"></span>
                                                    <span class="price"><em>$</em>299<sup>90</sup></span>
                                                </div>
                                                <div class="price_col_body clearfix">
                                                    <div class="price_body_inner">
                                                        <div class="price_body_top">
                                                            <span>Full Circle</span>
                                                            <strong>Premium</strong>
                                                            <div class="line"></div>
                                                        </div>
                                                        <ul>
                                                            <li>Unlimited Traffic</li>
                                                            <li>50 gb in Cloud</li>
                                                            <li>1 gbit/sec</li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="price_col_foot">
                                                    <div class="sign_up"><a href="#" class="btn btn-red btn-large"><span>Buy Now</span></a></div>
                                                </div>
                                            </div>
                                            <!--/ pricing-item -->
                                        </li>

                                    </ul>
                                </div>
                                <!--/ pricing list style2 -->
                            </div>
                            <div class="example-code">
                                    <pre class="prettyprint">
&lt;div class="pricing_box price_style2">
    &lt;ul class="clearfix">

        &lt;li class="price_col price_col_blue col_active">
            &lt;div class="price_item boxed">
                &lt;div class="price_col_head">
                    &lt;span class="badge badge-large">&lt;/span>
                    &lt;span class="price">&lt;em>$&lt;/em>199&lt;sup>90&lt;/sup>&lt;/span>
                &lt;/div>
                &lt;div class="price_col_body clearfix">
                    &lt;div class="price_body_inner">
                        &lt;div class="price_body_top">
                            &lt;span>Full Circle&lt;/span>
                            &lt;strong>Basic&lt;/strong>
                            &lt;div class="line">&lt;/div>
                        &lt;/div>
                        &lt;ul>
                            &lt;li>Unlimited Traffic&lt;/li>
                            &lt;li>20 gb in Cloud&lt;/li>
                            &lt;li>0.5 gbit/sec&lt;/li>
                        &lt;/ul>
                    &lt;/div>
                &lt;/div>
                &lt;div class="price_col_foot">
                    &lt;div class="sign_up">
                        &lt;a href="#" class="btn btn-blue">&lt;span>Buy Now&lt;/span>&lt;/a>
                    &lt;/div>
                &lt;/div>
            &lt;/div>
        &lt;/li>

        &lt;li class="price_col price_col_red">
            &lt;div class="price_item boxed">
                &lt;div class="price_col_head">
                    &lt;span class="badge badge-large">&lt;/span>
                    &lt;span class="price">&lt;em>$&lt;/em>299&lt;sup>90&lt;/sup>&lt;/span>
                &lt;/div>
                &lt;div class="price_col_body clearfix">
                    &lt;div class="price_body_inner">
                        &lt;div class="price_body_top">
                            &lt;span>Full Circle&lt;/span>
                            &lt;strong>Premium&lt;/strong>
                            &lt;div class="line">&lt;/div>
                        &lt;/div>
                        &lt;ul>
                            &lt;li>Unlimited Traffic&lt;/li>
                            &lt;li>50 gb in Cloud&lt;/li>
                            &lt;li>1 gbit/sec&lt;/li>
                        &lt;/ul>
                    &lt;/div>
                &lt;/div>
                &lt;div class="price_col_foot">
                    &lt;div class="sign_up">
                        &lt;a href="#" class="btn btn-red btn-large">&lt;span>Buy Now&lt;/span>&lt;/a>
                    &lt;/div>
                &lt;/div>
            &lt;/div>
        &lt;/li>

    &lt;/ul>
&lt;/div>
                                    </pre>
                            </div>
                        </div>
                        <!-- Pricing List Style 2 -->
                    </div>
                    <!--/ Pricing List -->

                    <!-- Content Box -->
                    <div class="section-demo">
                        <h2 id="content-box">Content Box</h2>

                        <div class="description">
                            <p>Use titled box to display different content.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <!-- widget -->
                                        <div class="widget-container boxed">
                                            <h3 class="widget-title">Widget Title</h3>
                                            <div class="inner"></div>
                                        </div>
                                        <!-- /widget -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container boxed">
    &lt;h3 class="widget-title">Widget Title&lt;/h3>
    &lt;div class="inner">
        &lt;!-- place your content here -->
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Content Box -->

                    <!-- Message Field -->
                    <div class="section-demo">
                        <h2 id="message-field">Message Field</h2>

                        <div class="description">
                            <p></p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <!-- Simple Message Field -->
                                <div class="comment-list styled clearfix">
                                    <ol>
                                        <li class="comment">
                                            <div class="comment-body boxed">
                                                <div class="comment-arrow"></div>
                                                <div class="comment-avatar">
                                                    <div class="avatar"><img src="../metro-vibes-css/images/temp/avatar6.png" alt="" /></div>
                                                </div>
                                                <div class="comment-text">
                                                    <div class="comment-author clearfix">
                                                        <a href="#" class="link-author">Jude Law</a>
                                                    </div>
                                                    <div class="comment-entry">
                                                        He made his film debut with a minor part in Back ti the Future Part II (1989). Many desktop publishing packages and web page editors now use Lorem Ipsum.
                                                    </div>
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                        </li>
                                    </ol>
                                </div>
                                <!--/ Simple Message Field -->
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="comment-list styled clearfix">
    &lt;ol>
        &lt;li class="comment">
            &lt;div class="comment-body boxed">
                &lt;div class="comment-arrow">&lt;/div>
                &lt;div class="comment-avatar">
                    &lt;div class="avatar">
                        &lt;img src="images/temp/avatar6.png" alt="" />
                    &lt;/div>
                &lt;/div>
                &lt;div class="comment-text">
                    &lt;div class="comment-author clearfix">
                        &lt;a href="#" class="link-author">Jude Law&lt;/a>
                    &lt;/div>
                    &lt;div class="comment-entry">
                        He made his film debut with a minor part in Back ti the Future Part II (1989). Many desktop publishing packages and web page editors now use Lorem Ipsum.
                    &lt;/div>
                &lt;/div>
                &lt;div class="clear">&lt;/div>
            &lt;/div>
        &lt;/li>
    &lt;/ol>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Message Field -->

                    <!-- Video Player -->
                    <div class="section-demo">
                        <h2 id="video-player">Video Player</h2>

                        <div class="description">
                            <p>Use Video.js player to play video content.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Video Player require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;link href="css/video-js.css" rel="stylesheet">
&lt;script src="js/video.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-10 col-sm-offset-1">
                                        <!-- Video Player -->
                                        <div class="video_player boxed">
                                            <div class="inner">
                                                <video id="my_video_1" class="video-js" controls loop
                                                       preload="auto" poster="../metro-vibes-css/images/temp/vjs_poster2.png"
                                                       data-setup="{}">
                                                    <source src="http://test.themefuse.com/artiom/galapagos.mp4" type='video/mp4'>
                                                </video>
                                                <script>
                                                    _V_("my_video_1").ready(function(){
                                                        var myPlayer = this;
                                                        var aspectRatio = 267/640;
                                                        var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
                                                        myPlayer.width(width).height( width * aspectRatio );

                                                        function resizeVideoJS(){
                                                            var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
                                                            myPlayer.width(width).height( width * aspectRatio );
                                                        }
                                                        resizeVideoJS();
                                                        window.onresize = resizeVideoJS;
                                                    });
                                                </script>
                                            </div>
                                        </div>
                                        <!--/ Video Player -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="video_player boxed">
    &lt;div class="inner">
        &lt;video id="my_video_1" class="video-js" controls loop
               preload="auto" poster="images/temp/vjs_poster2.png"
               data-setup="{}">
            &lt;source src="http://path-to-video/video.mp4" type='video/mp4'>
        &lt;/video>
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Video Player via JS:</div>

                                <pre class="prettyprint">
&lt;script>
    _V_("my_video_1").ready(function(){
        var myPlayer = this;
        var aspectRatio = 267/640;
        var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
        myPlayer.width(width).height( width * aspectRatio );

        function resizeVideoJS(){
            var width = document.getElementById(myPlayer.id).parentElement.offsetWidth;
            myPlayer.width(width).height( width * aspectRatio );
        }
        resizeVideoJS();
        window.onresize = resizeVideoJS;
    });
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Video Player -->

                    <!-- Audio Player -->
                    <div class="section-demo">
                        <h2 id="audio-player">Audio Player</h2>

                        <div class="description">
                            <p>Use jPlayer to play audio content.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Audio Player require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;link href="css/jplayer.css" rel="stylesheet">
&lt;script src="js/jquery.jplayer.min.js">&lt;/script>
&lt;script src="js/jplayer.playlist.min.js">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <!-- Widget Audio Player -->
                                        <div class="widget-container widget-audio boxed">
                                            <div class="inner">
                                                <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                                                <div id="jp_container_1" class="jp-audio">
                                                    <div class="inner">
                                                        <div class="jp-gui jp-interface">
                                                            <div class="jp-controls-wrap">
                                                                <div class="song_title"></div>
                                                                <div class="jp-current-time"></div>
                                                                <div class="jp-duration"></div>
                                                                <div class="jp-progress">
                                                                    <div class="jp-seek-bar">
                                                                        <div class="jp-play-bar"></div>
                                                                    </div>
                                                                </div>
                                                                <ul class="jp-controls clearfix">
                                                                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
                                                                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
                                                                    <li><a href="javascript:;" class="jp-previous disabled" tabindex="1">previous</a></li>
                                                                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
                                                                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
                                                                    <li><a href="javascript:;" class="jp-next" tabindex="1">next</a></li>
                                                                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
                                                                    <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
                                                                    <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
                                                                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
                                                                    <li><a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle</a></li>
                                                                    <li><a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off</a></li>
                                                                    <li><a href="javascript:;" class="jp-playlist-toggle" tabindex="1" title="Toggle PlayList">Toggle PlayList</a></li>
                                                                </ul>
                                                                <div class="jp-volume-bar">
                                                                    <div class="jp-volume-bar-value"></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="jp-playlist">
                                                            <ul class="jp-playlist-inner">
                                                                <li></li>
                                                            </ul>
                                                        </div>
                                                        <div class="jp-no-solution">
                                                            <span>Update Required</span>
                                                            <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Widget Audio Player -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget-audio boxed">
    &lt;div class="inner">
        &lt;div id="jquery_jplayer_1" class="jp-jplayer">&lt;/div>
        &lt;div id="jp_container_1" class="jp-audio">
            &lt;div class="inner">
                &lt;div class="jp-gui jp-interface">
                    &lt;div class="jp-controls-wrap">
                        &lt;div class="song_title">&lt;/div>
                        &lt;div class="jp-current-time">&lt;/div>
                        &lt;div class="jp-duration">&lt;/div>
                        &lt;div class="jp-progress">
                            &lt;div class="jp-seek-bar">
                                &lt;div class="jp-play-bar">&lt;/div>
                            &lt;/div>
                        &lt;/div>
                        &lt;ul class="jp-controls clearfix">
                            &lt;li>&lt;a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-previous disabled" tabindex="1">previous&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-play" tabindex="1">play&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-pause" tabindex="1">pause&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-next" tabindex="1">next&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-stop" tabindex="1">stop&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-shuffle" tabindex="1" title="shuffle">shuffle&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-shuffle-off" tabindex="1" title="shuffle off">shuffle off&lt;/a>&lt;/li>
                            &lt;li>&lt;a href="javascript:;" class="jp-playlist-toggle" tabindex="1" title="Toggle PlayList">Toggle PlayList&lt;/a>&lt;/li>
                        &lt;/ul>
                        &lt;div class="jp-volume-bar">
                            &lt;div class="jp-volume-bar-value">&lt;/div>
                        &lt;/div>
                    &lt;/div>
                &lt;/div>
                &lt;div class="jp-playlist">
                    &lt;ul class="jp-playlist-inner">
                        &lt;li>&lt;/li>
                    &lt;/ul>
                &lt;/div>
                &lt;div class="jp-no-solution">
                    &lt;span>Update Required&lt;/span>
                    &lt;a href="http://get.adobe.com/flashplayer/" target="_blank">
                        Flash plugin
                    &lt;/a>
                &lt;/div>
            &lt;/div>
        &lt;/div>
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Audio Player via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    //&lt;![CDATA[
    $(document).ready(function(){

        new jPlayerPlaylist({
            jPlayer: "#jquery_jplayer_1",
            cssSelectorAncestor: "#jp_container_1"
        }, [
            {
                title:"&lt;div class='item-song'>He lives in you, he lives in me&lt;/div>&lt;div class='item-artist'>Elton John, Hans Zimmer&lt;/div>&lt;img src='images/temp/music-player4.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-05-Your_face.ogg"
            },
            {
                title:"&lt;div class='item-song'>I saw you dancing&lt;/div>&lt;div class='item-artist'>Yaki Da&lt;/div>&lt;img src='images/temp/music-player5.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",
                oga:"http://www.jplayer.org/audio/ogg/TSP-07-Cybersonnet.ogg"
            },
            {
                title:"&lt;div class='item-song'>Sands of Time&lt;/div>&lt;div class='item-artist'>Pandora&lt;/div>&lt;img src='images/temp/music-player6.jpg' alt='' />",
                mp3:"http://www.jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
                oga:"http://www.jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
            }
        ], {
            swfPath: "js",
            supplied: "oga, mp3",
            wmode: "window",
            smoothPlayBar: false,
            keyEnabled: false
        });
    });
    //]]&gt;
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Audio Player -->

                    <!-- Sliders -->
                    <div class="section-demo">
                        <h2 id="sliders">Sliders</h2>

                        <!-- Image Slider -->
                        <div class="description">
                            <h3 id="image-slider">Image Slider</h3>
                            <p>The slideshow is based on Bootstrap's carousel.js</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-8 col-sm-offset-2">
                                        <!-- Image Slider -->
                                        <div class="widget-container widget_gallery boxed">
                                            <div class="inner">
                                                <div id="myCarousel2" class="carousel slide" data-interval="20000">
                                                    <!-- Carousel items -->
                                                    <div class="carousel-inner">
                                                        <div class="active item"><img src="../metro-vibes-css/images/temp/post_img6.jpg" alt="" /><div class="carousel-desc"><span>Wild Deer</span></div></div>
                                                        <div class="item"><img src="../metro-vibes-css/images/temp/post_img1.jpg" alt="" /><div class="carousel-desc"><span>Change your fate</span></div></div>
                                                        <div class="item"><img src="../metro-vibes-css/images/temp/post_img3.jpg" alt="" /><div class="carousel-desc"><span>Unstoppable hero</span></div></div>
                                                        <div class="item"><img src="../metro-vibes-css/images/temp/post_img2.jpg" alt="" /><div class="carousel-desc"><span>Change your fate</span></div></div>
                                                        <div class="item"><img src="../metro-vibes-css/images/temp/post_img4.jpg" alt="" /><div class="carousel-desc"><span>Unstoppable hero</span></div></div>
                                                    </div>
                                                    <!-- Carousel indicators -->
                                                    <ol class="carousel-indicators">
                                                        <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
                                                        <li data-target="#myCarousel2" data-slide-to="1"></li>
                                                        <li data-target="#myCarousel2" data-slide-to="2"></li>
                                                        <li data-target="#myCarousel2" data-slide-to="3"></li>
                                                        <li data-target="#myCarousel2" data-slide-to="4"></li>
                                                    </ol>
                                                    <!-- Carousel nav -->
                                                    <a class="carousel-control left" href="#myCarousel2" data-slide="prev"></a>
                                                    <a class="carousel-control right" href="#myCarousel2" data-slide="next"></a>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/ Image Slider -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                    <pre class="prettyprint">
&lt;div class="widget-container widget_gallery boxed">
    &lt;div class="inner">
        &lt;div id="myCarousel2" class="carousel slide" data-interval="20000">
            &lt;!-- Carousel items -->
            &lt;div class="carousel-inner">
                &lt;div class="item">
                    &lt;img src="images/temp/post_img6.jpg" alt="" />
                    &lt;div class="carousel-desc">&lt;span>Wild Deer&lt;/span>&lt;/div>
                &lt;/div>
                ...
                ...
                ...
            &lt;/div>
            &lt;!-- Carousel indicators -->
            &lt;ol class="carousel-indicators">
                &lt;li data-target="#myCarousel2" data-slide-to="0">&lt;/li>
                ...
                ...
                ...
            &lt;/ol>
            &lt;!-- Carousel nav -->
            &lt;a class="carousel-control left" href="#myCarousel2" data-slide="prev">&lt;/a>
            &lt;a class="carousel-control right" href="#myCarousel2" data-slide="next">&lt;/a>
        &lt;/div>
    &lt;/div>
&lt;/div>
                                    </pre>
                            </div>
                        </div>
                        <!--/ Image Slider -->
                    </div>
                    <!--/ Sliders -->

                    <!-- Calendar -->
                    <div class="section-demo">
                        <h2 id="widget-calendar">Calendar</h2>

                        <div class="description">
                            <p>Calendar allow users to select multiple dates. Two different calendar styles available. To switch to the alternative calendar style just add class <code>styled</code> to <code>widget_calendar</code>.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>Calendar require next files to be included into <code>&lt;head></code> section of the page:</p>
                                <pre class="prettyprint">
&lt;script src="js/libs/jquery-ui.min.js">&lt;/script>
&lt;script src="js/jquery-ui.multidatespicker.js">&lt;/script>
&lt;link href="css/jquery-ui-1.8.20.custom.css" rel="stylesheet">
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <!-- widget calendar-->
                                        <div class="widget-container widget_calendar boxed styled">
                                            <div class="inner">
                                                <input type="text" name="date_departure" class="inputField" value="" id="date_departure">
                                                <script>
                                                    // <![CDATA[
                                                    jQuery(document).ready(function($) {

                                                        function assignCalendar(id){
                                                            $('<div class="calendar" />')
                                                                    .insertAfter( $(id) )
                                                                    .multiDatesPicker({
                                                                        dateFormat: 'yy-mm-dd',
                                                                        minDate: new Date(),
                                                                        maxDate: '+1y',
                                                                        altField: id,
                                                                        firstDay: 1,
                                                                        showOtherMonths: true
                                                                    }).prev().hide();
                                                        }

                                                        assignCalendar('#date_departure');

                                                    });
                                                    // ]]>
                                                </script>
                                            </div>
                                        </div>
                                        <!--/ widget calendar-->
                                    </div>

                                    <div class="col-sm-6">
                                        <!-- widget calendar-->
                                        <div class="widget-container widget_calendar boxed">
                                            <div class="inner">
                                                <input type="text" name="date_departure2" class="inputField" value="" id="date_departure2">
                                                <script>
                                                    // <![CDATA[
                                                    jQuery(document).ready(function($) {

                                                        function assignCalendar(id){
                                                            $('<div class="calendar" />')
                                                                    .insertAfter( $(id) )
                                                                    .multiDatesPicker({
                                                                        dateFormat: 'yy-mm-dd',
                                                                        minDate: new Date(),
                                                                        maxDate: '+1y',
                                                                        altField: id,
                                                                        firstDay: 1,
                                                                        showOtherMonths: true
                                                                    }).prev().hide();
                                                        }

                                                        assignCalendar('#date_departure2');
                                                    });
                                                    // ]]>
                                                </script>
                                            </div>
                                        </div>
                                        <!--/ widget calendar-->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget_calendar boxed styled">
    &lt;div class="inner">
        &lt;input type="text" name="date_departure" class="inputField" value="" id="date_departure">
    &lt;/div>
&lt;/div>

&lt;div class="widget-container widget_calendar boxed">
    &lt;div class="inner">
        &lt;input type="text" name="date_departure2" class="inputField" value="" id="date_departure2">
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Calendar via JS:</div>

                                <pre class="prettyprint">
&lt;script>
    // &lt;![CDATA[
    jQuery(document).ready(function($) {

        // First Calendar
        function assignCalendar(id){
            $('&lt;div class="calendar" /&gt;')
                    .insertAfter( $(id) )
                    .multiDatesPicker({
                        dateFormat: 'yy-mm-dd',
                        minDate: new Date(),
                        maxDate: '+1y',
                        altField: id,
                        firstDay: 1,
                        showOtherMonths: true
                    }).prev().hide();
        }
        assignCalendar('#date_departure');

        // Second Calendar
        function assignCalendar(id){
            $('&lt;div class="calendar" /&gt;')
                    .insertAfter( $(id) )
                    .multiDatesPicker({
                        dateFormat: 'yy-mm-dd',
                        minDate: new Date(),
                        maxDate: '+1y',
                        altField: id,
                        firstDay: 1,
                        showOtherMonths: true
                    }).prev().hide();
        }
        assignCalendar('#date_departure2');

    });
    // ]]&gt;
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Calendar -->

                    <!-- User Profile -->
                    <div class="section-demo">
                        <h2 id="user-profile">User Profile</h2>

                        <div class="description">
                            <h3 id="user-def">Default User Profile</h3>
                            <p>Display information about user in a styled box.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <!-- Avatar Placeholder -->
                                        <div class="widget-container widget_avatar boxed">
                                            <div class="avatar-image"><img src="../metro-vibes-css/images/temp/avatar-image.jpg" alt="" /></div>
                                            <div class="inner clearfix">
                                                <div class="avatar"><img src="../metro-vibes-css/images/temp/avatar.png" alt="" /></div>
                                                <h5>John Raymons</h5>
                                                <span class="subtitle">Your talent amazes! This is awesome. Excited to see the final product.</span>
                                            </div>
                                            <div class="post-meta-links">
                                                <ul class="clearfix">
                                                    <li class="post-view"><a href="#"><span><i class="icon-post"></i>172</span></a></li>
                                                    <li class="post-comm"><a href="#"><span><i class="icon-post"></i>34</span></a></li>
                                                    <li class="post-like"><a href="#"><span><i class="icon-post"></i>210</span></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <!--/ Avatar Placeholder -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget_avatar boxed">
    &lt;div class="avatar-image">
        &lt;img src="images/temp/avatar-image.jpg" alt="" />
    &lt;/div>
    &lt;div class="inner clearfix">
        &lt;div class="avatar">
            &lt;img src="images/temp/avatar.png" alt="" />
        &lt;/div>
        &lt;h5>John Raymons&lt;/h5>
        &lt;span class="subtitle">
            Your talent amazes! This is awesome. Excited to see the final product.
        &lt;/span>
    &lt;/div>
    &lt;div class="post-meta-links">
        &lt;ul class="clearfix">
            &lt;li class="post-view">
                &lt;a href="#">&lt;span>&lt;i class="icon-post">&lt;/i>172&lt;/span>&lt;/a>
            &lt;/li>
            &lt;li class="post-comm">
                &lt;a href="#">&lt;span>&lt;i class="icon-post">&lt;/i>34&lt;/span>&lt;/a>
            &lt;/li>
            &lt;li class="post-like">
                &lt;a href="#">&lt;span>&lt;i class="icon-post">&lt;/i>210&lt;/span>&lt;/a>
            &lt;/li>
        &lt;/ul>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ User Profile -->

                    <!-- Social Buttons -->
                    <div class="section-demo">
                        <h2 id="social-buttons">Social Buttons</h2>

                        <div class="description">
                            <p>Add the Social links block to your site.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-2">
                                        <!-- Widget Social Buttons -->
                                        <div class="widget-container widget-social boxed">
                                            <ul>
                                                <li><a href="#" class="social-facebook"><span>Facebook</span></a></li>
                                                <li><a href="#" class="social-pinterest"><span>Pinterest</span></a></li>
                                                <li><a href="#" class="social-twitter"><span>Twitter</span></a></li>
                                            </ul>
                                        </div>
                                        <!--/ Widget Social Buttons -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget-social boxed">
    &lt;ul>
        &lt;li>
            &lt;a href="#" class="social-facebook">&lt;span>Facebook&lt;/span>&lt;/a>
        &lt;/li>
        &lt;li>
            &lt;a href="#" class="social-pinterest">&lt;span>Pinterest&lt;/span>&lt;/a>
        &lt;/li>
        &lt;li>
            &lt;a href="#" class="social-twitter">&lt;span>Twitter&lt;/span>&lt;/a>
        &lt;/li>
    &lt;/ul>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Social Buttons -->

                    <!-- Weather -->
                    <div class="section-demo">
                        <h2 id="weather-informer">Weather Informer</h2>

                        <div class="description">
                            <p>Use this widget to show air temperature, water temperature and wind speed.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-4">
                                        <!-- Widget Weather -->
                                        <div class="widget-container widget-weather boxed clearfix">
                                            <div class="air-temp"><strong>26&deg;</strong></div>
                                            <div class="water-temp"><strong>14&deg;</strong></div>
                                            <div class="wind-speed"><strong>13</strong></div>
                                        </div>
                                        <!--/ Widget Weather -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget-weather boxed clearfix">
    &lt;div class="air-temp">&lt;strong>26&deg;&lt;/strong>&lt;/div>
    &lt;div class="water-temp">&lt;strong>14&deg;&lt;/strong>&lt;/div>
    &lt;div class="wind-speed">&lt;strong>13&lt;/strong>&lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Weather -->

                    <!-- Trade -->
                    <div class="section-demo">
                        <h2 id="trade-informer">Trade Informer</h2>

                        <div class="description">
                            <p>Use this widget to show trader's information.</p>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <!-- Widget Trade -->
                                        <div class="widget-container widget-trade boxed">
                                            <div class="widget-title">
                                                <span class="trade-rate trade-rate-up">634. 39</span>
                                                <span class="trade-rate-change">+2.18 (3.71%)</span>
                                            </div>
                                            <div class="inner">
                                                <div class="trade-time">Today 2:25 pm</div>
                                                <h4 class="trade-location"><a href="#">Salt Lake City, Utah</a></h4>
                                                <ul class="trade-shares clearfix">
                                                    <li class="traded"><a href="#"><strong>13.5 M</strong><span>Shares Traded</span></a></li>
                                                    <li class="capitalization"><a href="#"><strong>28.44 B</strong><span>Market Cap</span></a></li>
                                                </ul>
                                                <div class="trade-bottom trade-graph">
                                                    <h6 class="trade-bottom-title">AAPL</h6>
                                                    <div class="trade-bottom-content"><img src="../metro-vibes-css/images/trade-graph.png" alt="" /></div>
                                                </div>
                                                <div class="trade-bottom trade-yearly-change">
                                                    <h6 class="trade-bottom-title">Yearly Change</h6>
                                                    <div class="trade-bottom-content"><span>+127. 01</span></div>
                                                </div>
                                                <div class="clear"></div>
                                            </div>
                                        </div>
                                        <!--/ Widget Trade -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="widget-container widget-trade boxed">
    &lt;div class="widget-title">
        &lt;span class="trade-rate trade-rate-up">634. 39&lt;/span>
        &lt;span class="trade-rate-change">+2.18 (3.71%)&lt;/span>
    &lt;/div>
    &lt;div class="inner">
        &lt;div class="trade-time">Today 2:25 pm&lt;/div>
        &lt;h4 class="trade-location">
            &lt;a href="#">Salt Lake City, Utah&lt;/a>
        &lt;/h4>
        &lt;ul class="trade-shares clearfix">
            &lt;li class="traded">
                &lt;a href="#">
                    &lt;strong>13.5 M&lt;/strong>
                    &lt;span>Shares Traded&lt;/span>
                &lt;/a>
            &lt;/li>
            &lt;li class="capitalization">
                &lt;a href="#">
                    &lt;strong>28.44 B&lt;/strong>
                    &lt;span>Market Cap&lt;/span>
                &lt;/a>
            &lt;/li>
        &lt;/ul>
        &lt;div class="trade-bottom trade-graph">
            &lt;h6 class="trade-bottom-title">AAPL&lt;/h6>
            &lt;div class="trade-bottom-content">
                &lt;img src="images/trade-graph.png" alt="" />
            &lt;/div>
        &lt;/div>
        &lt;div class="trade-bottom trade-yearly-change">
            &lt;h6 class="trade-bottom-title">Yearly Change&lt;/h6>
            &lt;div class="trade-bottom-content">
                &lt;span>+127. 01&lt;/span>
            &lt;/div>
        &lt;/div>
        &lt;div class="clear">&lt;/div>
    &lt;/div>
&lt;/div>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Trade -->

                    <!-- Statistics -->
                    <div class="section-demo">
                        <h2 id="statistics">Statistics</h2>

                        <div class="description">
                            <p>Use this widget to show different statistical data.</p>
                            <div class="callout">
                                <h5>Element specific usage</h5>
                                <p>This widget require Google Charts:</p>
                                <pre class="prettyprint">
&lt;script type="text/javascript" src="https://www.google.com/jsapi">&lt;/script>
                                </pre>
                            </div>
                            <h4>Example</h4>
                        </div>
                        <div class="example">
                            <div class="example-item alt-color">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <!-- Widget Stats -->
                                        <div class="tabs_framed styled widget-stats">
                                            <ul class="tabs clearfix">
                                                <li class="active"><a href="#diagram" data-toggle="tab">Diagram Stats</a></li>
                                                <li><a href="#month" data-toggle="tab">Month Report</a></li>
                                            </ul>

                                            <div class="tab-content boxed clearfix">
                                                <div class="tab-pane fade in active" id="diagram">
                                                    <h6>Data Transfer</h6>
                                                    <div id="donutchart" class="donutchart"></div>
                                                    <ul class="stats-data clearfix">
                                                        <li><a href="#"><span>audio</span><strong>55%</strong></a></li>
                                                        <li class="red"><a href="#"><span>video</span><strong>23%</strong></a></li>
                                                        <li class="yellow"><a href="#"><span>photo</span><strong>17%</strong></a></li>
                                                    </ul>
                                                    <ul class="stats-links clearfix">
                                                        <li><a href="#"><i class="stats-icon stats-icon1"></i><br /><span>upload files</span></a></li>
                                                        <li><a href="#"><i class="stats-icon stats-icon2"></i><br /><span>share link</span></a></li>
                                                        <li><a href="#"><i class="stats-icon stats-icon3"></i><br /><span>back up</span></a></li>
                                                    </ul>
                                                </div>
                                                <div class="tab-pane fade" id="month">
                                                    <h6>Data chart</h6>
                                                    <div id="columnchart" class="columnchart"></div>
                                                    <ul class="stats-data clearfix">
                                                        <li><a href="#"><span>audio</span><strong>50%</strong></a></li>
                                                        <li class="red"><a href="#"><span>video</span><strong>26%</strong></a></li>
                                                        <li class="yellow"><a href="#"><span>photo</span><strong>18%</strong></a></li>
                                                    </ul>
                                                    <ul class="stats-links clearfix">
                                                        <li><a href="#"><i class="stats-icon stats-icon1"></i><br /><span>upload files</span></a></li>
                                                        <li><a href="#"><i class="stats-icon stats-icon2"></i><br /><span>share link</span></a></li>
                                                        <li><a href="#"><i class="stats-icon stats-icon3"></i><br /><span>back up</span></a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <!--/ Widget Stats -->
                                    </div>
                                </div>
                            </div>
                            <div class="example-code">
                                <pre class="prettyprint">
&lt;div class="tabs_framed styled widget-stats">
    &lt;ul class="tabs clearfix">
        &lt;li class="active">
            &lt;a href="#diagram" data-toggle="tab">Diagram Stats&lt;/a>
        &lt;/li>
        &lt;li>
            &lt;a href="#month" data-toggle="tab">Month Report&lt;/a>
        &lt;/li>
    &lt;/ul>

    &lt;div class="tab-content boxed clearfix">
        &lt;div class="tab-pane fade in active" id="diagram">
            &lt;h6>Data Transfer&lt;/h6>
            &lt;div id="donutchart" class="donutchart">&lt;/div>
            &lt;ul class="stats-data clearfix">
                &lt;li>
                    &lt;a href="#">&lt;span>audio&lt;/span>&lt;strong>55%&lt;/strong>&lt;/a>
                &lt;/li>
                &lt;li class="red">
                    &lt;a href="#">&lt;span>video&lt;/span>&lt;strong>23%&lt;/strong>&lt;/a>
                &lt;/li>
                &lt;li class="yellow">
                    &lt;a href="#">&lt;span>photo&lt;/span>&lt;strong>17%&lt;/strong>&lt;/a>
                &lt;/li>
            &lt;/ul>
            &lt;ul class="stats-links clearfix">
                &lt;li>
                    &lt;a href="#">
                        &lt;i class="stats-icon stats-icon1">&lt;/i>
                        &lt;br />
                        &lt;span>upload files&lt;/span>
                    &lt;/a>
                &lt;/li>
                &lt;li>
                    &lt;a href="#">
                        &lt;i class="stats-icon stats-icon2">&lt;/i>
                        &lt;br />
                        &lt;span>share link&lt;/span>
                    &lt;/a>
                &lt;/li>
                &lt;li>
                    &lt;a href="#">
                        &lt;i class="stats-icon stats-icon3">&lt;/i>
                        &lt;br />
                        &lt;span>back up&lt;/span>
                    &lt;/a>
                &lt;/li>
            &lt;/ul>
        &lt;/div>
        &lt;div class="tab-pane fade" id="month">
            &lt;h6>Data chart&lt;/h6>
            &lt;div id="columnchart" class="columnchart">&lt;/div>
            &lt;ul class="stats-data clearfix">
                &lt;li>
                    &lt;a href="#">&lt;span>audio&lt;/span>&lt;strong>50%&lt;/strong>&lt;/a>
                &lt;/li>
                &lt;li class="red">
                    &lt;a href="#">&lt;span>video&lt;/span>&lt;strong>26%&lt;/strong>&lt;/a>
                &lt;/li>
                &lt;li class="yellow">
                    &lt;a href="#">&lt;span>photo&lt;/span>&lt;strong>18%&lt;/strong>&lt;/a>
                &lt;/li>
            &lt;/ul>
            &lt;ul class="stats-links clearfix">
                &lt;li>
                    &lt;a href="#">
                        &lt;i class="stats-icon stats-icon1">&lt;/i>
                        &lt;br />
                        &lt;span>upload files&lt;/span>
                    &lt;/a>
                &lt;/li>
                &lt;li>
                    &lt;a href="#">
                        &lt;i class="stats-icon stats-icon2">&lt;/i>
                        &lt;br />
                        &lt;span>share link&lt;/span>
                    &lt;/a>
                &lt;/li>
                &lt;li>
                    &lt;a href="#">
                        &lt;i class="stats-icon stats-icon3">&lt;/i>
                        &lt;br />
                        &lt;span>back up&lt;/span>
                    &lt;/a>
                &lt;/li>
            &lt;/ul>
        &lt;/div>
    &lt;/div>
&lt;/div>
                                </pre>

                                <div class="fire-js">Enable Google Charts via JS:</div>

                                <pre class="prettyprint">
&lt;script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['Media', 'GB'],
            ['Audio', 1100],
            ['Video', 460],
            ['Photo', 340],
            ['Other', 100]
        ]);

        var options = {
            pieHole: 0.4,
            legend: 'none',
            pieSliceText: 'none',
            width: 220,
            height: 220,
            slices: {0: {color: '#4daf7b'}, 1: {color: '#e6623d'}, 2: {color: '#ebc85e'}, 3: {color: '#f4ede7'}},
            chartArea:{left:"10px", top:"10px", width:"92%", height:"92%"}
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);

        var data2 = google.visualization.arrayToDataTable([
            ['Month', 'Traffic'],
            ['June',  1100],
            ['July',  1580],
            ['August',  1300],
            ['September',  1430]
        ]);

        var options2 = {
            width: 220,
            height: 220,
            legend: 'none',
            colors: ['#4daf7b'],
            chartArea:{left:0, top:0, width:"100%", height:"100%"},
            hAxis:{textPosition:"none", gridlines:{color:"#fff"}, baselineColor:"#4daf7b"},
            vAxis:{textPosition:"none", gridlines:{color:"#fff"}, baselineColor:"#4daf7b"}
        };

        var chart2 = new google.visualization.ColumnChart(document.getElementById('columnchart'));
        chart2.draw(data2, options2);
    }
&lt;/script>
                                </pre>
                            </div>
                        </div>
                    </div>
                    <!--/ Statistics -->

                </div>
                <!--/ content -->
            </div>
        </div>
        <!--/ row-->
    </div>
    <!--/ container -->

</div>
</body>
</html>